<template>
	<!-- 新增编辑地址 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{id!=0?i18n.m054:i18n.m053}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h24">

		</view>
		<!-- 表单列表 -->
		<view class="mx-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<!-- 真实名 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m055}}
					</view>
				</view>
				<input v-model="realName" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m056">
			</view>
			<!-- 真实姓 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m057}}
					</view>
				</view>
				<input v-model="realSurname" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m058">
			</view>
			<!-- 所在国家 -->
			<!-- <view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m059}}
					</view>
				</view>
				<input @click="openPopup" v-model="nationality" disabled class="flex-1 inputText"
					:class="model=='light'?'inputTextLight':''" placeholder-class="placeholderClass A-Regular"
					type="text" :placeholder="i18n.m060">
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view> -->
			<!-- 省份/州 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m061}}
					</view>
				</view>
				<input v-model="province" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m062">
			</view>
			<!-- 城市 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m063}}
					</view>
				</view>
				<input v-model="city" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m064">
			</view>
			<!-- 邮编 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m065}}
					</view>
				</view>
				<input v-model="postCode" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m066">
			</view>
			<!-- 详细地址 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m067}}
					</view>
				</view>
				<input v-model="detailAddress" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m068">
			</view>
			<!-- 手机号 -->
			<view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m069}}
					</view>
				</view>
				<input v-model="mobileNumber" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m070">
			</view>
			<!-- 电子邮箱 -->
			<view style="border: none;" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m071}}
					</view>
				</view>
				<input v-model="email" class="flex-1 inputText" :class="model=='light'?'inputTextLight':''"
					placeholder-class="placeholderClass A-Regular" type="text" :placeholder="i18n.m072">
			</view>
			<!-- 设为默认地址 -->
			<!-- <view style="border: none;" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m073}}
					</view>
				</view>
				<view class="flex-1">

				</view>
				<switch color="#5951BA" :checked="isdefault" @change="switchChange" style="transform:scale(0.7)" />
			</view> -->
		</view>
		<!-- 保存 -->
		<view @click="submit" class="btn mx-auto A-Medium clickCss">
			{{i18n.m074}}
		</view>
		<!-- 选择国籍 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm(item)" v-for="(item,index) in nationalityList" :style="index==2?'border:none;':''" class="list py-3" :class="model=='light'?'listLight':''">
					{{item.title}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		addressInfoAdd,
		addressInfoEdit,
		getNationalityList
	} from '@/core/api/user.js'
	export default {
		data() {
			return {
				nationalityList:[],
				isdefault: true,
				id: 0,
				"city": "",
				"detailAddress": "",
				"email": "",
				"mobileNumber": "",
				"mobileUserId": uni.getStorageSync('mobileUserId'),
				"nationality": "",
				"nationalityValue":'',
				"postCode": "",
				"province": "",
				"realName": "",
				"realSurname": ""
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			i18n2() {
				return this.$t('last');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			this.getNationalityLists();
			if(uni.getStorageSync('editInfo')){
				  let obj = uni.getStorageSync('editInfo');
				  this.id = obj.id;
				  this.city =  obj.city;
				  this.detailAddress =  obj.detailAddress;
				  this.email =  obj.email;
				  this.mobileNumber =  obj.mobileNumber;
				  this.mobileUserId =  obj.mobileUserId;
				  this.nationality =  obj.nationality_dictText;
				  this.nationalityValue = obj.nationality;
				  this.postCode =  obj.postCode;
				  this.province =  obj.province;
				  this.realName =  obj.realName;
				  this.realSurname = obj.realSurname;
			}
		},
		methods: {
			submit() {
				if (this.realName === '') return this.$tool.showToast(this.i18n2.l005);
				if (this.realSurname === '') return this.$tool.showToast(this.i18n2.l006);
				// if (this.nationality === '') return this.$tool.showToast(this.i18n2.l007);
				if (this.province === '') return this.$tool.showToast(this.i18n2.l008);
				if (this.city === '') return this.$tool.showToast(this.i18n2.l009);
				if (this.postCode === '') return this.$tool.showToast(this.i18n2.l010);
				if (this.detailAddress === '') return this.$tool.showToast(this.i18n2.l011);
				if (this.mobileNumber === '') return this.$tool.showToast(this.i18n2.l012);
				if (this.email === '') return this.$tool.showToast(this.i18n2.l013);
				let data = {
					"city": this.city,
					"detailAddress": this.detailAddress,
					"email": this.email,
					"mobileNumber": this.mobileNumber,
					"mobileUserId": this.mobileUserId,
					"nationality": this.nationalityValue,
					"postCode": this.postCode,
					"province": this.province,
					"realName": this.realName,
					"realSurname": this.realSurname
				}
				if(this.id==0){
					addressInfoAdd(data).then(res=>{
						console.log(res,'cs-addressInfoAdd');
						this.$tool.goBack();
						// if(this.isdefault) {
							
						// }
					})
				}else{
					data.id = this.id;
					addressInfoEdit(data).then(res=>{
						console.log(res,'cs-addressInfoAdd');
						this.$tool.goBack();
						// if(this.isdefault) {
							
						// }
					})
				}
			},
			confirm(item){
				this.closePopup();
				this.nationality = item.title;
				this.nationalityValue = item.value;
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			closePopup(){
				this.$refs.popup.close();
			},
			// 获取国籍列表
			getNationalityLists(){
				getNationalityList().then(res=>{
					console.log(res,'cs-getNationalityList');
					this.nationalityList = res.result;
				})
			},
			switchChange(e) {
				this.isdefault = e.target.value;
			},
		}
	}
</script>
<style>

</style>
<style scoped lang="scss">
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;
		.titleWrap {
			margin-bottom: 6rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
	// 弹窗---结束
	.p-stickyLight {
		background: #fff;
	}

	.h24 {
		height: 24rpx;
	}

	.menuList {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;

		.list {
			border-bottom: 2rpx solid #1F2128;

			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.title {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.titleLight {
				color: #0E0F11;
			}

			.icon2 {
				width: 44rpx;
				height: 44rpx;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
				text-align: right;
			}
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.menuListLight {
		background: #ffffff;
		border: 2rpx solid #F4F4F4;
	}

	.btn {
		width: 690rpx;
		height: 84rpx;
		background: #5951BA;
		border-radius: 74rpx;
		margin-top: 78rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>